<script setup>
import Header from '@/components/sc_header/App.vue'
import Breadcrumb from '@/components/breadcrumb/App.vue'
import Sidebar from '@/components/sidebar/App.vue'
import Footer from '@/components/sc_footer/App.vue'
import { ref } from 'vue'

const active  = ref(0)


const handleClick = (key) => {
  active.value = key
}
</script>

<template>

  <Header></Header>
  <main class="main-content">
    <div class="container empMain">
      <!-- 左侧菜单 -->
      <div class="left-menu">
        <div class="menu-title">双创服务</div>
        <div class="menu-item" :class="active === 0 ? 'active' : '' " @click="handleClick(0)" data-target="support">
          <i>🔧</i>双创支撑
        </div>
        <div class="menu-item" :class="active === 1 ? 'active' : '' " @click="handleClick(1)" data-target="resource">
          <i>📚</i>双创资源
        </div>
        <div class="menu-item" :class="active === 2 ? 'active' : '' " @click="handleClick(2)" data-target="project">
          <i>📈</i>双创项目
        </div>
        <div class="menu-item" :class="active === 3 ? 'active' : '' " @click="handleClick(3)" data-target="carrier">
          <i>🏢</i>双创载体
        </div>
        <div class="menu-item" :class="active === 4 ? 'active' : '' " @click="handleClick(4)" data-target="activity">
          <i>🎯</i>双创活动
        </div>
      </div>

      <!-- 右侧内容 -->
      <div class="right-content">
        <!-- 双创支撑 -->
        <div class="content-section" id="support" v-if="active===0">
          <div class="content-header">
            <div class="content-icon">🔧</div>
            <h2 class="content-title">双创支撑</h2>
          </div>
          <p class="content-desc">
            双创支撑展现城乡一体化示范区的技术专利、技术研发以及技术支撑，技术专利为创业创新者提供技术专利方面的知识产权服务，技术研发为创业创新者提供研发方面的技术支持以及实际应用，技术支撑为创业创新者提供关于体系支撑方面的知识，帮助创业创新者掌握技术专利，研发新技术，增强支撑体系，更加全面的完善技术方面的各种相关服务，建立知识产权方面意识，提高技术研发能力，增强技术支撑体系。
          </p>
          <div class="content-image">
            <img src="https://via.placeholder.com/1200x350/4facfe/ffffff?text=双创支撑体系示意图" alt="双创支撑体系示意图">
          </div>
          <div class="content-grid">
            <div class="content-card">
              <h3 class="card-title">技术专利服务</h3>
              <p class="card-desc">提供专利申请、保护、运用等全方位服务，助力企业技术创新，包括专利检索、申请指导、侵权维权等专业服务。</p>
            </div>
            <div class="content-card">
              <h3 class="card-title">技术研发支持</h3>
              <p class="card-desc">联合高校科研院所，为企业提供技术研发解决方案，包括技术攻关、成果转化、实验室共享等服务。</p>
            </div>
            <div class="content-card">
              <h3 class="card-title">技术体系支撑</h3>
              <p class="card-desc">构建完善的技术支撑体系，提升企业核心竞争力，包括技术标准制定、质量检测、认证评估等服务。</p>
            </div>
          </div>
        </div>

        <!-- 双创资源 -->
        <div class="content-section" id="resource" v-if="active===1">
          <div class="content-header">
            <div class="content-icon">📚</div>
            <h2 class="content-title">双创资源</h2>
          </div>
          <p class="content-desc">
            双创资源展现创业创新的政府服务资源、优秀企业家、优秀企业、第三方服务机构等双创资源信息：
            政府方面：提供咨询类的信息服务以及帮助创业创新者了解相关政策，使创业创新者全面了解政策信息；
            优秀企业及企业家：通过讲解自身的创业经验和创业中的困难经历来传授成功方法，以及风险的规避；
            第三方服务机构：从咨询、金融、人力等方面帮助创业创新者分析，使其获取到最新的创业创新动态及自身的发展方向，掌握大量的经验，避免弯路和经济损失。
          </p>
          <div class="content-image">
            <img src="https://via.placeholder.com/1200x350/00f2fe/ffffff?text=双创资源网络图" alt="双创资源网络图">
          </div>
          <div class="content-grid">
            <div class="content-card">
              <h3 class="card-title">政府服务资源</h3>
              <p class="card-desc">一站式政策咨询、项目申报、行政审批等服务，包括工商注册、税务登记、社保办理等全流程服务。</p>
            </div>
            <div class="content-card">
              <h3 class="card-title">企业家导师</h3>
              <p class="card-desc">成功企业家分享经验，指导创业者规避风险，包括创业辅导、商业模式设计、市场拓展等指导服务。</p>
            </div>
            <div class="content-card">
              <h3 class="card-title">第三方服务</h3>
              <p class="card-desc">金融、法律、人力等专业服务机构支持，包括融资对接、法律咨询、人才招聘等全方位服务。</p>
            </div>
          </div>
        </div>

        <!-- 双创项目 -->
        <div class="content-section" id="project" v-if="active===2">
          <div class="content-header">
            <div class="content-icon">📈</div>
            <h2 class="content-title">双创项目</h2>
          </div>
          <p class="content-desc">
            双创项目展现城乡一体化示范区最新项目信息，以及以往成功的项目案例信息，为创业创新者提供新项目方案以及以往的项目成功经验，使创业创新者提高创业创新的成功率，在成功的同时解决了人员的就业问题，也拉动经济的增长，从而提供城乡一体化示范区的生产总值，全面实现经济的快速增长，并且门户还面向社会征集项目创意和高效的项目方案，为创业者的创业风险提供了一层保障，形成良性循环。
          </p>
          <div class="content-image">
            <img src="https://via.placeholder.com/1200x350/667eea/ffffff?text=双创项目展示" alt="双创项目展示">
          </div>
          <div class="content-grid">
            <div class="content-card">
              <h3 class="card-title">重点项目</h3>
              <p class="card-desc">示范区重点扶持的创新项目清单，包括智能制造、新能源、生物医药等战略性新兴产业项目。</p>
            </div>
            <div class="content-card">
              <h3 class="card-title">成功案例</h3>
              <p class="card-desc">已成功孵化的优秀项目经验分享，包括项目背景、实施过程、成果效益等详细案例。</p>
            </div>
            <div class="content-card">
              <h3 class="card-title">项目征集</h3>
              <p class="card-desc">面向社会公开征集创新项目方案，包括项目申报指南、评审标准、扶持政策等信息。</p>
            </div>
          </div>
        </div>

        <!-- 双创载体 -->
        <div class="content-section" id="carrier" v-if="active===3">
          <div class="content-header">
            <div class="content-icon">🏢</div>
            <h2 class="content-title">双创载体</h2>
          </div>
          <p class="content-desc">
            双创载体展示城乡一体化示范区关于双创载体的资源信息，孵化园区的介绍，园区的优质项目资源，主要的功能展示，地理位置以及园区体量的大小，适合发展的人员及群体；产业园区的介绍及产业园优质的项目资源，主要的功能展示，地理位置以及园区体谅的大小，事宜创业创新的人员及群体；众创空间的介绍优质的资源项目，主要的功能展示，地理位置及优势的人员群体。
          </p>
          <div class="content-image">
            <img src="https://via.placeholder.com/1200x350/764ba2/ffffff?text=双创载体分布图" alt="双创载体分布图">
          </div>
          <div class="content-grid">
            <div class="content-card">
              <h3 class="card-title">孵化园区</h3>
              <p class="card-desc">提供办公空间、设备共享等基础服务，包括创业苗圃、孵化器、加速器等不同阶段的孵化载体。</p>
            </div>
            <div class="content-card">
              <h3 class="card-title">产业园区</h3>
              <p class="card-desc">产业链集聚的专业化园区，包括特色产业园区、专业园区、主题园区等不同类型。</p>
            </div>
            <div class="content-card">
              <h3 class="card-title">众创空间</h3>
              <p class="card-desc">低成本、便利化的创新创业服务平台，包括联合办公空间、创客空间、共享实验室等。</p>
            </div>
          </div>
        </div>

        <!-- 双创活动 -->
        <div class="content-section" id="activity" v-if="active===4">
          <div class="content-header">
            <div class="content-icon">🎯</div>
            <h2 class="content-title">双创活动</h2>
          </div>
          <p class="content-desc">
            双创活动展示城乡一体化示范区的双创活动信息，分为以往的活动和现在正在进行的活动，以活动促进项目的运转，以活动吸引资金和资源，为创业创业提供一个活动展示平台，并且通过领导视察和鼓励政策，促进更多的人展示自己的项目，介绍自己的项目，获得政府和企业的认可，并根据实际情况获得相应的政策扶持。
          </p>
          <div class="content-image">
            <img src="https://via.placeholder.com/1200x350/a55eea/ffffff?text=双创活动剪影" alt="双创活动剪影">
          </div>
          <div class="content-grid">
            <div class="content-card">
              <h3 class="card-title">创业大赛</h3>
              <p class="card-desc">年度创新创业项目竞赛，包括赛事公告、参赛指南、评审标准、奖项设置等信息。</p>
            </div>
            <div class="content-card">
              <h3 class="card-title">路演活动</h3>
              <p class="card-desc">项目展示与投融资对接，包括活动预告、项目报名、投资人对接等服务。</p>
            </div>
            <div class="content-card">
              <h3 class="card-title">培训讲座</h3>
              <p class="card-desc">创业知识、技能培训活动，包括课程安排、讲师介绍、报名方式等信息。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <Footer></Footer>
</template>

<style scoped>

.empMain{
  display: flex;
}
/* 主要内容区域 */
.main-content {
  padding: 30px 0;
  display: flex;
  gap: 30px;
  min-height: calc(100vh - 150px);
}

/* 左侧菜单 - 修改为更紧凑的布局 */
.left-menu {
  width: 280px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 20px 0;
  position: sticky;
  top: 100px;
  height: fit-content;
  margin-right: 20px;
}

.menu-title {
  padding: 15px 20px;
  font-size: 18px;
  color: #1e3c72;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 10px;
  font-weight: 600;
}

.menu-item {
  padding: 12px 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
}

.menu-item:hover,
.menu-item.active {
  background: #f8fafc;
  border-left: 3px solid #4facfe;
  color: #1e3c72;
}

.menu-item i {
  margin-right: 12px;
  font-size: 18px;
  width: 24px;
  text-align: center;
}

/* 右侧内容 - 优化布局 */
.right-content {
  flex: 1;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 30px;
  transition: all 0.3s ease;
}

.content-header {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e2e8f0;
}

.content-icon {
  font-size: 32px;
  margin-right: 15px;
  color: #1e3c72;
}

.content-title {
  font-size: 24px;
  color: #1e3c72;
  margin: 0;
}

.content-desc {
  font-size: 16px;
  color: #475569;
  line-height: 1.8;
  margin-bottom: 25px;
}

.content-image {
  width: 100%;
  height: 350px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-radius: 8px;
  margin: 25px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  overflow: hidden;
}

.content-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 30px;
}

.content-card {
  background: #f8fafc;
  border-radius: 8px;
  padding: 25px;
  border-left: 4px solid #4facfe;
  transition: all 0.3s ease;
}

.content-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 18px;
  color: #1e3c72;
  margin-bottom: 12px;
  font-weight: 600;
}

.card-desc {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .main-content {
    flex-direction: column;
  }

  .left-menu {
    width: 100%;
    position: static;
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .nav-container {
    flex-direction: column;
  }

  .nav-menu {
    margin-top: 15px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .nav-item {
    margin: 0 15px 10px;
  }

  .content-grid {
    grid-template-columns: 1fr;
  }
}
</style>